<template>
  <section class="rotate-message" v-if="list.length > 0">
    待办事项：
    <div class="message-wrapper">
      <ul :style="{top: -100 * index + '%'}">
        <li v-for="(item, index) in list" :key="index">
          <template v-if="item.link">
            {{item.before}}<router-link :to="item.link"><span>点击此处</span></router-link>{{item.after}}
          </template>
          <template v-else>
            {{item.before}}
          </template>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import constant from '../../constant/constant.js'
import { requestAjax } from '../../common.js'
let interval
export default {
  data() {
    return {
      index: 0,
      list: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loadData()  
      setInterval(() => {
        const len = this.list.length
        if (this.index >= len - 1) {
          this.index = 0
        } else {
          this.index ++
        }        
      }, 4500)
      interval = setInterval(() => {
        this.loadData()
      }, 2 * 60 * 1000)
    },
    resolve(item) {
      const data = {}
      if(!item.showMsg || item.showMsg.indexOf('点击此处') == -1) {
        data.before = item.showMsg
        data.after = ''
        return data
      }
      const content = item.showMsg.split('点击此处')
      data.before = content[0]
      data.after = content[1]
      const orderId = item.keyVals ? item.keyVals.find(item => item.key == 'orderId') : ''
      data.link = '/' + item.route + (orderId ? '/' + orderId.value : '')
      return data
    },
    loadData() {
      const url = constant.URL.SYSTEM.ROTATEMESSAGE
      requestAjax(url, '{}', {}, ({data, status}) => {
        if (!data.bussData) return
        const list = data.bussData
        if (status != 200 || !list.length || list.length <= 0) return
        this.list = list.map(item => this.resolve(item))
      })
    }
  },
  beforeDestroy() {
    interval && clearInterval(interval)
  }
}
</script>

<style lang="scss" scoped>
.rotate-message {
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  margin-top: 18px;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  .message-wrapper {
    flex: 1;
    height: 100%;
    overflow: hidden;
    ul {
      position: relative;
      width: 100%;
      margin-top: 0;
      padding-left: 0;
      width: 100%;
      overflow: hidden;
      transition: .5s top;
      li {
        list-style: none;
        span {
          color: #0087dc;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
